<template>
  <div class="page">
    <mt-header fixed title="审批列表详情" style="height: 0.64rem;">
      <router-link to="" slot="left">
        <mt-button icon="back" @click="goBack()">返回</mt-button>
      </router-link>
      <mt-button class="mint-button-text" slot="right" @click="action('sh_prompt')">审批</mt-button>
    </mt-header>
    <div class="dialog-wrap">
      <div class="dialog-cover" v-if="isShow" @click="action('sh_prompt')"></div>
      <transition name="drop">
        <div class="dialog-content" :style="'left:'+clientWidth" v-if="isShow">
          <div class="group-title">
            <div class="title">
              <div class="title-examine">
                审批
              </div>
              <div class="title-close" @click="action('close')">
                <img src="../../assets/tool/close.png"/>
              </div>
            </div>
            <div class="money">
              <div class="money-left">
                <span>合计金额</span>
              </div>
              <div class="money-right">
                <span>{{sum}}</span>
              </div>
            </div>
            <div class="memo">
              <div class="memo-top">
                <span style="margin-left: 10px;color: #000000;">审批意见</span>
              </div>
              <div class="memo-down">
                <textarea class="memo-text" v-model="memo"></textarea>
              </div>
            </div>
            <div class="sub-button">
              <div class="button-left">
                <input class="button-yes" type="button" value="同意" @click="auditTask(1)"/>
              </div>
              <div class="button-right">
                <input class="button-no" type="button" value="不同意" @click="auditTask(0)"/>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>

    <div class="content">
      <!-- 商品信息-->
      <!-- 加载数据-->
      <div class="loadmore" ref="List">
        <ul class="d-ul-box">
          <li class="d-li-box" v-for="(detail,index) in detailList" :key="index">
            <div class="d-list-box">
              <div class="d-list-line">
                <div class="line-left">商品名称</div>
                <div class="line-right bottom-line">{{detail.pro_name}}</div>
              </div>
              <div class="d-list-line">
                <div class="section-left">
                  <label>商品规格</label><span class="right-value bottom-line">{{detail.pro_guige}}</span>
                </div>
                <div class="section-right">
                  <label>单位</label><span class="right-value bottom-line">{{detail.pro_danwei}}</span>
                </div>
              </div>
              <div class="d-list-line">
                <div class="line-left">生产厂家</div>
                <div class="line-right bottom-line">{{detail.pro_manufactor}}</div>
              </div>
              <div class="d-list-line">
                <div class="section-left">
                  <label class="left-label">数量</label><span class="right-value  bottom-line">{{detail.pro_shengou_shuliang}}</span>
                </div>
                <div class="section-right">
                  <label class="left-label">单价</label><span
                  class="right-value  bottom-line">{{detail.pro_danjia}}</span>
                </div>
              </div>
            </div><!-- d-list-box -->
          </li>
        </ul>
      </div>


    </div>


    <div class="footer-section">
      <div class="ft-amount ft-text">合计:<span>{{amount}}</span>元</div>
    </div>
  </div>
</template>

<script>

  import {MessageBox, Field} from 'mint-ui'
  import * as constantutils from '../../utils/constantutils'

  export default {
    name: 'page-navbar',
    data() {
      return {
        selected: '1',
        isShow: false,
        sum: '',
        memo: '',
        auditOpinion: '',
        taskID: -1,
        clientWidth: ''
      }
    },
    computed: {
      goods_totprice: function () {      // 计算总金额 this.goods_price*this.reqQuantity

        let totP = 0;
        for (let i = 0; i < this.detailList.length; i++) {

          totP += this.detailList[i].pro_sum * 1;

        }
        return totP;
      },
      detailList() {
        return this.$store.state.medicalPurchasePendingDetail.detailList;
      },
      amount() {
        return this.$store.state.medicalPurchasePendingDetail.basicData.amount || '';
      }
    },
    methods: {
      action(act) {
        this.sum = this.goods_totprice;
        if (act === 'sh_prompt') {
          //获取屏幕宽度，弹窗为固定大小，屏幕宽度 - 弹窗宽度 / 2= 弹窗margin-left的值
          this.clientWidth = ((window.innerWidth - 335) / 2) * 0.01 + 'rem';
          console.log(this.clientWidth)
          this.isShow = true;
        } else if (act === 'close') {
          this.isShow = false;
        }
      },
      //点击审批
      auditTask(isAgree) {
        console.log('点击审批');
        console.log(isAgree);
        let taskID = this.$route.params.taskID;
        let purchaseId = this.$route.params.purchaseId;
        let Memo = this.memo;
        // console.log('taskID --'+taskID);
        // console.log('ID --'+id);
        let payload = {taskID: taskID, sheetId: purchaseId, examineStatus: isAgree, examineMemo: Memo};
        let type = this.$route.params.type;
        let params = {purchaseId: purchaseId, taskID: taskID, type: constantutils.TYPE_RECORD};
        if (type == constantutils.TYPE_RECORD) {//备案审批是单独的接口
          this.$store.dispatch('auditAssetsRecordTask', payload);
        } else {

          this.$store.dispatch('auditPurchaseTask', payload);
        }
        console.log(payload);
        this.isShow = false;
      },
      goBack() {
        this.$router.go(-1);
        this.$store.state.footerVisible = true;
      }
    },
    mounted() {
      //获取路由参数
      console.log(this.$route.params);
      let params = this.$route.params;
      this.$store.state.footerVisible = false;
      this.$store.dispatch('getMedicalPurchaseDetail', params);
    }
  }

</script>

<style scoped>
  /*背景*/
  #listInfo {
    background-color: #ebebeb;
  }

  .content {
    margin-top: 0.64rem;
    height: auto;
    background: #ebebeb;
  }

  .d-ul-box {
  }

  .d-li-box {
    font-size: 0.13rem;
    color: #363636;
    background: #fff;
    margin-bottom: 0.08rem;
  }

  .d-list-box {
  }

  .d-list-line {
    display: flex;
    height: 0.30rem;
    line-height: 0.30rem;
    padding-right: 0.04rem;
  }

  .line-left {
    width: 0.78rem;
    padding-left: 0.15rem;
  }

  .line-right {
    flex: 1;
    padding-left: 0.05rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .section-left {
    flex: 1;
    padding-left: 0.15rem;
  }

  .section-right {
    flex: 1;
  }

  .d-list-line .line-right {
  }

  .d-list-line .line-left {
  }

  .section-left label, .section-right label {
  }

  .section-left span, .section-right span {
    margin-left: 0.15rem;
    padding-left: 0.05rem;
    width: 1rem;
    display: inline-block;
  }

  .left-label {
  }

  .right-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .bottom-line {
    border-bottom: 1px solid #ececec;
  }

  .drop-enter-active {
    transition: all .5s ease;
  }

  .drop-leave-active {
    transition: all .3s ease;
  }

  .drop-enter {
    transform: translateY(-5rem);
  }

  .drop-leave-active {
    transform: translateY(-5rem);
  }

  .dialog-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .dialog-cover {
    background: #000;
    opacity: 0.3;
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .dialog-content {
    width: 3.35rem;
    height: 2.45rem;
    position: fixed;
    max-height: 50%;
    background: #fff;
    top: 30%;
    /*left: 10%;*/
    /*margin-left: -41%;*/
    z-index: 10;
    line-height: 2;
    border-radius: 0.05rem !important;
  }

  .dialog-close {
    position: absolute;
    right: 0.05rem;
    top: 0.05rem;
    width: 0.20rem;
    height: 0.20rem;
    text-align: center;
    cursor: pointer;
  }

  .dialog-close:hover {
    color: #4fc08d;
  }

  .group-title {
    width: 3.25rem;
    height: 2.25rem;
  }

  .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.40rem;
    background-color: #4b659e;
  }

  .title-examine {
    color: #FFFFFF;
    font-size: 0.17rem;
    text-align: left;
    margin-left: 0.125rem;
    line-height: 0.40rem;
  }

  .title-close {
    margin-left: 0.125rem;
    position: absolute;
    right: 0.125rem;
    top: 0.015rem;
  }

  .money {
    position: absolute;
    left: 0.30rem;
    top: 0.59rem;
    width: 2.75rem;
    height: 0.35rem;
    background-color: #EBEBEB;
    border-radius: 0.05rem;
    color: #000000;
  }

  .money-left {
    text-align: left;
    float: left;
    margin-left: 0.05rem;
  }

  .money-right {
    text-align: right;
    float: right;
    margin-right: 0.05rem;
  }

  .memo {
    position: absolute;
    left: 0.30rem;
    top: 1.08rem;
    width: 2.75rem;
    height: 0.80rem;
    background-color: #EBEBEB;
    border-radius: 0.05rem;
  }

  .memo-top {
    height: 0.25rem;
    width: 100%;
    text-align: left;
  }

  .memo-top {
    /*height: 0.55rem;*/
    width: 100%;
  }

  .memo-text {
    height: 0.45rem;
    width: 2.60rem;
    background: none;
    border: none;
    outline: none;
    resize: none;
    padding-top: 0.05rem;
  }

  .sub-button {
    position: absolute;
    left: 0.30rem;
    top: 2.00rem;
    width: 2.75rem;
    height: 0.35rem;
    border-radius: 0.05rem;
  }

  .button-left {
    float: left;
    height: 100%;
    width: 1.37rem;
  }

  .button-right {
    float: right;
    height: 100%;
    width: 1.37rem;
  }

  .button-yes {
    background-color: #EBEBEB;
    border: none;
    border-radius: 0.05rem;
    width: 0.90rem;
    height: 0.30rem;
    outline: none;
    color: #007AFF;
    float: left;
    margin-left: 0.15rem;
  }

  .button-no {
    background-color: #EBEBEB;
    border: none;
    border-radius: 0.05rem;
    width: 0.90rem;
    height: 0.30rem;
    outline: none;
    float: right;
    margin-right: 0.15rem;
  }

  .money span, .memo span, .sub-button input, .memo-down textarea {
    display: block;
    font-size: 0.16rem;
  }

  .title-close img {
    display: block;
    width: 0.25rem;
    height: 0.25rem;
  }

  .footer-section {
    font-size: 0.16rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    background: #26a2ff;
  }

  .ft-amount {
    text-align: right;
    padding-right: 0.2rem;
  }

  .ft-text {
    color: #fff;
  }

  .ft-text span {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    vertical-align: middle;
  }

</style>

